<div v-bind:class="[componentId]">
    <cly-header>
        <template v-slot:header-left>
            <h2 v-if="currentSecondaryTab === 'validations'"> {{i18n('data-manager.manage-validations')}} </h2>
            <h2 v-else-if="currentSecondaryTab === 'segmentation'"> {{i18n('data-manager.manage-event-segmentation')}} </h2>
            <h2 v-else> {{i18n('data-manager.manage-events')}} </h2>
        </template>
        <template v-slot:header-tabs>
            <cly-dynamic-tabs :no-history=true v-model="currentSecondaryTab" :tabs="secondaryTabs" skin="secondary" :hideSingleTab="false"></cly-dynamic-tabs>
      </template>
      <template v-slot:header-right>
          <div v-if="isDrill">
              <cly-report-manager-dialog class="bu-mr-2" origin="data-manager"></cly-report-manager-dialog>
          </div>
          <div v-if="isDrill && currentSecondaryTab !== 'validations'">
            <cly-more-options v-if="canUserCreate || canUserCreateTransform" size="small" text="Create new" type="success" icon="el-icon-circle-plus" @command="handleCreateCommand($event, currentSecondaryTab)">
                <el-dropdown-item v-if="canUserCreateTransform && (currentSecondaryTab === 'events' || currentSecondaryTab === 'segmentation') " command="create-transform">
                    {{i18n('data-manager.create-transformation')}}
                </el-dropdown-item>
                <el-dropdown-item v-if="canUserCreate && (currentSecondaryTab === 'events' )" command="create-event">
                    {{i18n('data-manager.create-event')}}
                </el-dropdown-item>
                <el-dropdown-item v-if="canUserCreate && (currentSecondaryTab === 'event-groups') " command="create-event-group">
                    {{i18n('data-manager.create-group')}}
                </el-dropdown-item>
                <el-dropdown-item v-if="canUserCreateTransform && (currentSecondaryTab === 'transformations') " command="create-event-transform">
                    {{i18n('data-manager.create-event-transformation')}}
                </el-dropdown-item>
                <el-dropdown-item v-if="canUserCreateTransform && (currentSecondaryTab === 'transformations') " command="create-segment-transform">
                    {{i18n('data-manager.create-segment-transformation')}}
                </el-dropdown-item>
                <el-dropdown-item v-if="canUserCreate && (currentSecondaryTab === 'event-groups') " command="create-event-group">
                    {{i18n('data-manager.create-group')}}
                </el-dropdown-item>
            </cly-more-options>
          </div>
        <div v-if="isDrill && (canUserUpdate || canUserCreate || isUserGlobalAdmin)" class="bu-ml-2">
            <cly-more-options size="small" @command="handleMetaCommands($event)">
                <el-dropdown-item v-if="canUserUpdate" command="regnerate">{{i18n('data-manager.regenerate')}}</el-dropdown-item>
                <el-dropdown-item v-if="canUserCreate" command="export-schema">{{i18n('data-manager.export-schema')}}</el-dropdown-item>
                <el-dropdown-item v-if="canUserUpdate" command="import-schema">{{i18n('data-manager.import-schema')}}</el-dropdown-item>
                <el-dropdown-item v-if="isUserGlobalAdmin" command="navigate-settings">
                    <a href="#/manage/configurations/data-manager" > {{i18n('plugins.configs')}} </a>
                </el-dropdown-item>
            </cly-more-options>
        </div>
    </template>
    </cly-header>
    <events-drawer @close="closeDrawer" :controls="drawers.events"></events-drawer>
    <event-group-drawer @close="closeDrawer" :controls="drawers.eventgroup"></event-group-drawer>
    <div v-if="isDrill">
        <transform-drawer @close="closeDrawer" :controls="drawers.transform"></transform-drawer>
        <segments-drawer @close="closeDrawer" :controls="drawers.segments"></segments-drawer>
        <regenerate-drawer @close="closeDrawer" :controls="drawers.regenerate"></regenerate-drawer>
        <cly-form-dialog
            class="cly-vue-data-manager__dropzone"
            ref="importSchemaFormDialog"
            title="Import Event Schema"
            name="Import Event Schema"
            @submit="onSaveImport"
            :closeFn="onCloseImport"
            saveButtonLabel="Save"
            :isOpened="importDialogVisible">
            <template v-slot="formDialogScope">
                <cly-dropzone 
                @vdropzone-removed-file="onFileRemoved" 
                @vdropzone-file-added="onFileAdded" 
                ref="importSchemaDropzone" 
                id="import-schema-dropzone"
                :useCustomSlot=true 
                :options="dropzoneOptions">
                    <div class="cly-vue-data-manager__dropzone__content">
                        <div class="give-upload">
                            <div style="cursor:default">
                                <svg width="28" height="22" viewBox="0 0 28 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M11.3332 0.333252H3.33317C1.8665 0.333252 0.679837 1.53325 0.679837 2.99992L0.666504 18.9999C0.666504 20.4666 1.8665 21.6666 3.33317 21.6666H24.6665C26.1332 21.6666 27.3332 20.4666 27.3332 18.9999V5.66658C27.3332 4.19992 26.1332 2.99992 24.6665 2.99992H13.9998L11.3332 0.333252Z" fill="#A7AEB8"/>
                                </svg>
                            </div>
                            <div class="bu-mt-3 text-medium color-cool-gray-50">
                                {{ i18n('data-manager.drag-drop-file') }} <span class="color-blue-100"> {{ i18n('data-manager.click-to-upload') }}</span>
                            </div>
                        </div>
                    </div>
                </cly-dropzone>
            </template>
        </cly-form-dialog>
    </div>
</div>
